<template>
  <div class="common-uploader">
    <el-upload
      class="uploader"
      :action="action"
      :show-file-list="showFileList"
      :accept="accept"
      :multiple="multiple"
      :limit="limit"
      :on-exceed="onExceed"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :list-type="listStyle"
      :http-request="uploads">
      <img v-if="imageUrl" :src="imageUrl" class="avatar avatar-uploader-icon">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-row :gutter="10" class="upload-btns" v-if="imageUrl">
      <el-col :span="12"><i class="el-icon-view" @click="dialogVisible=true"></i></el-col>
      <el-col :span="12"><i class="el-icon-delete" @click="handleReset"></i></el-col>
    </el-row>
    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisible"
      width="60%"
      class="img-preview-dialog">
      <div class="tx-c">
        <img v-if="imageUrl" :src="imageUrl" class="preview" width="40" height="40">
      </div>
    </el-dialog>
  </div>
</template>

<!--图片上传组件-->
<script>
  import qnUpload from '@/utils/qiniu'

  export default {
    name: 'ImgUpload',
    data() {
      return {
        dialogVisible: false
      }
    },

    methods: {
      handleReset(){
        this.$emit('upload-callback', '')
      },
      handleSuccess(url) {
        this.$emit('upload-callback', url)
      },
      uploads(file) {
        const upload = {
          mediaType:'image',
          value:file,
          uploadTo:this.uploadFrom,
          uploadType:'normal',
          callback:{
            success:this.handleSuccess,
          }
        }
        qnUpload.upload(upload)
      }
    },
    props: {
      imageUrl: {
        type:String,
        default:''
      },
      action: {
        type: String,
        default: '1'
      },
      accept: {
        type: String,
        default: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP,'
      },
      showFileList: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      listStyle:'',
      limit: {
        type: Number,
        default: 200
      },
      onExceed: {
        type: Function,
        default: function(files, fileList) {
          this.$message.warning('已达到最大上传数量')
        }
      },
      handleAvatarSuccess: Function,
      beforeAvatarUpload: {
        type: Function,
        default: function(file) {
          const isLt5M = file.size / 1024 / 1024 < 5
          if (!isLt5M) {
            this.$message.error('上传图片大小不能超过 5MB!')
          }
          return isLt5M
        }
      },
      upload: Function,
      uploadFrom: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style lang="scss">
  .common-uploader {
    width: 122px;
    height: 122px;
    line-height: 12px;
    position: relative;

    .upload-btns {
      position: absolute;
      width: 100%;
      left: 6px;
      bottom: 0;
      height: 25px;
      background: rgba(0, 0, 0, .5);
      border-radius: 0 0 5px 5px;
      color: #fff;
      text-align: center;
      line-height: 25px;
      cursor: pointer;
    }

    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409EFF;
    }

    .preview-btn {
      margin-top: 10px;
      margin-left: 35px;
    }

    .avatar-uploader-icon {
      font-pageSize: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }

    .img-preview-dialog {
      max-height: 95%;
      overflow: auto;
    }

    .preview {
      width: 100%;
      height: auto;
    }
  }
</style>
